<template>
    <div class="toSearchBox">
        <div class="subdiv">
            <span>日期：</span>
            <div class="datetxt" @click="flag=!flag">{{timestampFormat(options.start_time) || '00:00:00'}} ~ {{timestampFormat(options.end_time) || '00:00:00'}}</div>
            <div class="sxbox" @click="flag=!flag">
                <van-icon v-if="flag" name="arrow-up" size="20px" color="#999"/>
                <van-icon v-else name="arrow-down" size="20px" color="#999"/>
            </div>
        </div>
        <div class="searchDetail" v-if="flag">
            <my-search v-model.trim="keyword" icon="" placeholder="请输入关键字搜查"/>
            <div class="rqbox">
                <div class="mnInput" @click="dateShow=true">{{start_time}}</div>
                <span>~</span>
                <div class="mnInput" @click="dateShow=true">{{end_time}}</div>
            </div>
            <div class="btnBox">
                <span @click="goSearch">确定</span>
                <span class="cancel" @click="flag=false">取消</span>
            </div>
        </div>
        <van-calendar v-model:show="dateShow" type="range" :min-date="minDate" :max-date="maxDate" @confirm="onConfirm" :default-date="defaultDate"/>
    </div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import moment from 'moment'
import {timestampFormat} from '@/utils/convert'
import mySearch from '@/components/mySearch.vue'

const props = defineProps({
    options:{
        type:Object,
        default:{}
    }
})

const emit = defineEmits(['search'])

const flag = ref(false)
const keyword = ref()

const dateShow = ref(false)
const minDate = ref(new Date('2010-01-01'))
const maxDate = ref(new Date())
const start_time = ref('')
const end_time = ref('')
const defaultDate = ref([])
const selectDate = ref([])

onMounted(()=>{
    keyword.value = props.options.keyword
    start_time.value = timestampFormat(props.options.start_time)
    end_time.value = timestampFormat(props.options.end_time)
    if(props.options.start_time && props.options.end_time){
        defaultDate.value = [new Date(timestampFormat(props.options.start_time)),new Date(timestampFormat(props.options.end_time))]
    }
    
})

const onConfirm = (dates)=>{
    start_time.value = moment(dates[0]).format('YYYY-MM-DD')
    end_time.value = moment(dates[1]).format('YYYY-MM-DD')
    selectDate.value = dates
    dateShow.value = false
}


const goSearch = ()=>{
    const start_time = moment(moment(selectDate.value[0]).format('YYYY-MM-DD')+' 00:00:01').unix()
    const end_time = moment(moment(selectDate.value[1]).format('YYYY-MM-DD')+' 23:59:59').unix()
    emit('search',{
        keyword:keyword.value,
        start_time,
        end_time
    })
    flag.value = false
}
</script>

<style lang="scss" scoped>
.toSearchBox{
    height: 80px;
    width: 100%;
    background-color: #fff;
    position: relative;
    z-index: 100;
    .subdiv{
        display: flex;
        height: 100%;
        box-sizing: border-box;
        padding: 0 20px;
        align-items: center;
        .datetxt{
            //flex: 1;
            padding: 0 20px 0 0;
        }
        .sxbox{
            display: flex;
            align-items: center;
            background-color: #fff;
            padding: 0 20px 0 0;
        }
    }
    .searchDetail{
        position: absolute;
        z-index: 100;
        width: 100%;
        box-sizing: border-box;
        left: 0;
        top: 78px;
        background-color: #fafafa;
        padding: 20px;
        box-shadow: 4px 4px 8px #eee;
        border-top: 1px solid #f7f7f7;
        .rqbox{
            display: flex;
            width: 100%;
            box-sizing: border-box;
            padding: 20px 0 0 0;
            .mnInput{
                display: flex;
                flex: 1;
                box-sizing: border-box;
                align-items: center;  
                justify-content: center;
                height: 60px;
                box-sizing: border-box;
                border: 1px solid #eee;
                border-radius: 5px;
                background-color: #fff;
                padding:0 10px;
                flex-shrink: 0;
                color: #999;
            }
            span{
                display: flex;
                box-sizing: border-box;
                align-items: center;
                justify-content: center;
                padding:0 20px;
                flex-shrink: 0;
                color: #999;
            }
        }
        .btnBox{
            display: flex;
            justify-content: end;
            padding: 30px 0 0 0;
            span{
                display: flex;
                align-items: center;
                justify-content: center;
                height: 60px;
                min-width:150px ;
                padding: 0 20px;
                background-color: #e3af2f;
                color: #fff;
                font-size: 24px;
                border-radius: 6px;
                &.cancel{
                    background-color: #eee;
                    color: #333;
                }
                &+span{
                    margin-left: 20px;
                }
            }
        }
    }
}
</style>